<template>
		<view class="search-box">
				<image class="input-view-search" src="../../static/ibs/img_comm_search.png" mode=""></image>
				<input @input="debouncedSearch" class="input" type="text" v-model="searchValue"
							 :placeholder="placeholder" confirm-type="search" />
				<image class="search-clear" v-if="isShowClear" src="../../static/ibs/img_comm_empty.png" @tap="clear" ></image>
		</view>
</template>
<script >
    var debounce = require('throttle-debounce') ;
    import enums from '@/common/sysEnum.js';
    import api from '@/common/api.js'
    export default {
        props: {
            placeholder: {
                type: String,
                default: '输入关键字'
            },
            resultMethod: Function, // 搜索到数据的回调函数
            // 延时搜索时间
            debounceTime: {
                type: Number,
                default: 500
            },
            searchKey: String, // 搜索关键字传递给后端的字段名
            remoteUrl: String, // 服务端接口地址
            requestMethod: { // 请求接口的方式，默认‘GET’
                type: String,
                default: 'POST'
            }
        },
        data() {
            return {
                searchValue: null,
				isShowClear:false
            };
        },
        onLoad() {
            let that = this;
            // 延时搜索
            this.debouncedSearch = debounce.debounce(this.debounceTime, () => {
				if(that.searchValue){
					that.isShowClear=true;
				}
                that.searchData();
            });
        },
        computed: {

        },
        methods:{
            /**
             * 根据关键字搜索数据
             */
            searchData() {
                var params = {};
                params[this.searchKey] = this.searchValue;
                console.log(JSON.stringify(params));
                let that = this;
				//修改搜索方法
				that.$emit('resultMethod',this.searchValue); 
/*                api.httpRequest(this.remoteUrl, params, this.requestMethod).then(res => {
                    if (res.code === 200) {
                        console.log('searchData: ' + JSON.stringify(res));
                        if (typeof that.resultMethod === 'function') {
                            that.resultMethod(res.result);
                        }
                    } else {

                    }
                }); */
            },
		//清除按钮
		clear(){
			let that=this;
			that.searchValue=null;
			that.isShowClear=false;
			that.debouncedSearch();
		},
        }
    }
</script>
<style>

.input-view-search {
        width: 36upx;
        height: 36upx;
				padding-left: 16upx;
  }

.search-box {
        /* 宽高 */
		  	width: 100%;
        height: 68upx;
        margin-left: 20upx;
        margin-right: 20upx;
        line-height: 68upx;
        /* Flex容器布局 */
        display: flex;
        /* 边框线 */
        border: #e5e5e5 1px solid;
        border-radius: 15upx;
        /* 交叉轴上的对齐方式 */
        align-items: center;
        /* 背景色 */
        background: #ffffff;
				border-radius: 34upx;
    }

 .search-box .input {
        /* 宽高 */
        height: 68upx;
        margin-left: 20upx;
        margin-right: 20upx;
        line-height: 68upx;
				width: 100%;
        flex: 1;
        /* 字体大小 */
        font-size: 28upx;
    }
.search-clear{
	width: 36upx;
	height: 36upx;
	padding-right: 20upx;
	
}
</style>